<template>
	<view class="store-page">
		<u-sticky>
			<view class="store-top">
				<view class="store-seach">
					<u-search placeholder="请输入店铺名称" v-model="value" :show-action="false" bg-color="#fff"  @change="changeWord" @search="seachNew"></u-search>
					
				</view>
			</view>
		</u-sticky>
		<view class="store-list-box">
			<view class="bind-box" v-if="storeBindList.length>0">
				<view class="bind-title">您已绑定过会员的店铺</view>
				<view class="bind-list">
					<view class="bind-item" v-for="(item,i) in storeBindList" :key="i" @click="goHome(item)">
						<view class="store-img-box">
							<Img :src="item.storeLogo" :customStyle="{width:'160rpx',height:'160rpx'}"  class="store-img"/>
						</view>
						<view class="store-intro">
							<view class="store-name">{{item.storeName}}</view>
							<view class="store-remark">{{item.description}}</view>
							<view class="store-addr">
								<image width="26rpx" height="30rpx" src="../../static/images/location.png" class="store-icon-img" ></image>
								<view class="store-addr-text">{{item.storeAddress}}</view>
								<view class="store-gap">{{handleDistance(item.distance)}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-bind-box" v-if="storeUnbindList.data.length>0">
				<view class="no-bind-title has-bind-title">为您推荐精选好店</view>
				<view class="no-bind-list">
					<view class="no-bind-item" v-for="(item,i) in storeUnbindList.data" :key="i"  @click="goHome(item)">
						<view class="store-img-box">
							<Img :src="item.storeLogo" :customStyle="{width:'160rpx',height:'160rpx'}"  class="store-img"/>
							<!-- <u-image width="160rpx" height="160rpx" src="https://cdn.uviewui.com/uview/swiper/1.jpg" class="store-img" ></u-image> -->
						</view>
						<view class="store-intro">
							<view class="store-name">{{item.storeName}}</view>
							<view class="store-remark">{{item.description}}</view>
							<view class="store-addr">
								<image width="26rpx" height="30rpx" src="../../static/images/location.png" class="store-icon-img" ></image>
								<view class="store-addr-text">{{item.storeAddress}}</view>
								<view class="store-gap">{{handleDistance(item.distance)}}</view>
							</view>
						</view>
					</view>
					<view class="no-more-data" v-if="loadingStatus==='nomore'">暂无更多数据~~</view>
				</view>
			</view>
		</view>
		<u-mask :show="showMask" z-index="998">
			<view class="maskLoading"><u-loading mode="circle" color="#fff" size="46"></u-loading></view>
		</u-mask>
	</view>
	
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import Img from '@/components/goods/img.vue'
	export default {
		components:{ Img },
		data() {
			return {
				value:'',
				seachTimer:'',
				condition:{
					current:1,
					size:20,
					storeName:'',
					cusLongitude:'',
					cusLatitude:''
				},
				showMask:true
			}
		},
		onShow() {
		},
		onLoad() {
			let _this = this
			uni.getLocation({
			    type: 'gcj02',
				isHighAccuracy:true,
			    success: function (res) {
					_this.condition.cusLongitude = res.longitude
					_this.condition.cusLatitude = res.latitude
					_this.getStoreUnBindList()
					_this.getStoreBindList()
			    },
				fail:function(){
					_this.getStoreUnBindList()
					_this.getStoreBindList()
				}
			});
		},
		computed:{
			...mapState({
				storeUnbindList: state => state.shop.storeUnbindList,
				loadingStatus: state => state.shop.loadingStatus,
				storeBindList: state => state.shop.storeBindList
			})
		},
		onReachBottom(){
			if (this.loadingStatus==='loadmore'&&this.condition.current<this.storeUnbindList.pages) {
				this.condition.current = this.condition.current + 1
				this.getStoreUnBindList()
			}
		},
		methods: {
			...mapActions(['ActGetStoreUnBindList','ActGetStoreBindList']),
			async getStoreUnBindList(){
				await this.ActGetStoreUnBindList(this.condition)
				this.showMask = false
			},
			async getStoreBindList(){
				await this.ActGetStoreBindList({cusLongitude:this.condition.cusLongitude,cusLatitude:this.condition.cusLatitude})
				this.showMask = false
			},
			handleDistance(num){
				let str = ''
				if (num<1000) {
					str = num + 'm'
				} else {
					str = (num/1000).toFixed(2) +'km'
				}
				return str
			},
			goHome(item){
				uni.setStorageSync('storeId',item.storeId);
				uni.setStorageSync('storeInfo',item);
				this.$u.route({
					url: 'pages/index/home',
					params:{
						storeId:item.storeId
					},
					type:'reLaunch'
				})
			},
			changeWord(e){
				console.log('eee',e)
				// if (this.seachTimer) {
				// 	clearTimeout(this.seachTimer)
				// 	console.log(9999)
				// }
				// this.seachTimer = setTimeout(()=>{
				// 	console.log(e,'aaa')
				// 	this.condition.storeName = e
				// 	this.condition.current = 1
				// 	this.getStoreUnBindList()
				// },500)
			},
			seachNew(e){
				this.condition.storeName = e
				this.condition.current = 1
				this.getStoreUnBindList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store-page{
		background: #F6F6F6;
	}
	.store-top-1{
		height:88rpx;
		width:100%;
		background-color:$u-type-primary;
		position: -webkit-sticky;
		position: sticky;
		top: 44px;
		z-index: 9;
	}
	.store-top{
		height:88rpx;
		width:100%;
		background-color:$u-type-primary;
		display: flex;
		align-items: center;
		/* position: -webkit-sticky;
		position: sticky; */
		/* top: 44px; */
		/* z-index: 9; */
	}
	.store-seach{
		background-color: #fff;
		width:700rpx;
		height:64rpx;
		margin:0 auto;
		border-radius: 250rpx;
		position: relative;
		// display: flex;
		// align-items: center;
	}
	.store-seach-icon{
		margin:0 16rpx;
	}
	.store-seach-input{
		flex: 1;
		font-size: 32rpx;
	}
	.store-list-box{
		padding-top:24rpx;
		background-color: $u-bg-color;
	}
	.bind-box{
		background: linear-gradient(to bottom,#e5f2ff, rgba(255,255,255,0.00));
		background-size: 100% 276rpx;
		background-repeat: no-repeat;
		margin-bottom: 32rpx;
	}
	.no-bind-box{
		background: linear-gradient(to bottom,#FFEDD1, rgba(255,255,255,0.00));
		background-size: 100% 276rpx;
		background-repeat: no-repeat;
	}
	.bind-title{
		padding:24rpx 24rpx 32rpx;
		font-size: 34rpx;
		color:$u-type-primary;
		font-weight: 700;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		// background: linear-gradient(180deg, #D3E8FF 0%, #FFFFFF 100%);
	}
	.no-bind-title{
		padding:24rpx 24rpx 32rpx;
		font-size: 30rpx;
		color:#F67701;
		font-weight: 700;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		// background: linear-gradient(180deg, #FFE7E7 0%, #FFFFFF 100%);
	}
	.has-bind-title{
		// background: linear-gradient(180deg, #FFF5D1 0%, #FFFFFF 100%);
		font-size: 34rpx;
	}
	.no-bind-list,.bind-list{
		padding:0 24rpx;
	}
	.no-bind-item,.bind-item{
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
		display: flex;
		padding:24rpx;
	}
	.store-img-box{
		width:160rpx;
		height:160rpx;
		margin-right:16rpx;
		border-radius: 16rpx;
		overflow: hidden;
		.store-img{
			width:160rpx;
			height:160rpx;
		}
	}
	.store-intro{
		flex:1;
		overflow: hidden;
	}
	.store-name{
	  // overflow: hidden;
	  // text-overflow: ellipsis;
	  // display: -webkit-box;
	  // -webkit-line-clamp: 2;
	  // line-clamp: 2;
	  // -webkit-box-orient: vertical;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  width:100%;
	  font-size: 32rpx;
	  color:$u-main-color;
	  // line-height: 35rpx;
	  font-weight: 700;
	}
	.store-remark{
		width:100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26rpx;
		color:$u-type-error;;
		margin-top:16rpx;
		margin-bottom: 36rpx;
		height:26rpx;
		line-height: 1;
	}
	.store-addr{
		display: flex;
	}
	.store-icon-img{
		margin-right: 4rpx;
		width:26rpx;
		height:30rpx
	}
	.store-addr-text{
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24rpx;
		color:$u-content-color;
		margin-right:4rpx;
	}
	.store-gap{
		color:$u-content-color;
		font-size: 24rpx;
	}
	.no-more-data{
		color:$u-content-color;
		font-size: 24rpx;
		text-align: center;
		padding:24rpx 0 30rpx;
	}
	.maskLoading{
		width:50rpx;
		height:50rpx;
		margin:0 auto;
		margin-top:55%;
	}
</style>
